﻿<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection" />
    <title>店铺业绩简报</title>
    <!--使用phonegap框架时引入脚本一定要放在最上面----->
    <script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script>
    <script src="js/jquery/jquery-1.8.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/config.js" type="text/javascript" charset="utf-8"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <link href="css/btnsty.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <link href="css/editform.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <link href="css/global.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <script src="js/Toast.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8" src="js/barcodescanner.js"></script>
    <script src="js/laydate.js" type="text/javascript"></script>
    <script src="js/Gvtools.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        USER_ID = localStorage.getItem("UserID");
        $(function () {
            laydate.skin('molv'); //切换皮肤，请查看skins下面皮肤库
            $("#txtbdate").val(today);
            $("#txtedate").val(today);
            $(".q-btn").live("click", function () {
                QureryData();
            });
            $(".show-data").live("click", function () {
                $("#bg_div").show();
                $("#data-title").text($(this).attr('stn') + '选择');
                $("#rightsidebar_box").animate({ width: "60%" });
                $("#btnok").attr('tfr', $(this).attr('d_id'));
                LoadDataList($(this).attr('act'));
            });
            $("#bg_div").live("click", function () {
                $("#rightsidebar_box").animate({ width: "0px" });
                $("#bg_div").hide();
            });
            $("#btncancel").live("click", function () {
                $("#rightsidebar_box").animate({ width: "0px" });
                $("#bg_div").hide();
            });
            $(".btnlist").live("click", function () {
                //alert($(this).text());

                if ($(this).attr('sel') == '0') {
                    $(this).attr('sel', '1');
                    $(this).addClass("onsee");
                } else {
                    $(this).attr('sel', '0');
                    $(this).removeClass("onsee");
                }
            });
            $("#btnok").live("click", function () {
                var str = "";
                var val = "";
                $(".btnlist").each(function (i) {
                    if ($(this).attr('sel') == '1') {
                        //alert($(this).text()); //得到每个 class=c_ul下面每个input的value值
                        str += $(this).text() + ",";
                        val += $(this).attr('val') + ",";
                    }
                });
                str = str.substring(0, str.length - 1);
                val = val.substring(0, val.length - 1);
                if (str == "")
                    str = "全部";
                //alert($("#btnok").attr('tfr'));
                $("#" + $("#btnok").attr('tfr')).text(str);
                $("#" + $("#btnok").attr('tfr')).attr('val', val);
                $("#btncancel").click();
            });
            $(".cl-btn").live("click", function () {
                $(".btnlist").each(function (i) {
                    if ($(this).attr('sel') == '1') {
                        //alert($(this).text()); //得到每个 class=c_ul下面每个input的value值
                        $(this).attr('sel', '0');
                        $(this).removeClass("onsee");
                    }
                });
            });
            SetGvFloat("mytab");
        });
        function GetStockList() {
            $.ajax({
                url: url_path + "/ajaxdata/Default.aspx",
                type: "POST",
                data: { aciton: 'GetShopList', userid: USER_ID },
                timeout: 30000,
                dataType: "text",
                success: function (data) {
                    var msg = $.trim(data);
                    if (msg == "NO_DATA") {
                        alert("您没有任何店仓权限，请联系管理员！");
                    } else {
                        var orderObj = JSON.parse(msg);
                        var html = "<option value='0'>全部</option>";
                        for (var i = 0; i < orderObj.length; i++) {
                            html += '<option value="' + orderObj[i].shopid + '">' + orderObj[i].shopname + '</option>'
                        }
                        $("#shoplist").html(html);
                        $("#shoplist").selectindex = 0;
                    }
                },
                error: function () {
                    showtoast("通讯超时,请检查网络.", null, 100, 100);
                }
            });
        }
        function QureryData() {
            $("#loading-mask").show();
            $.ajax({
                url: url_path + "/ajaxdata/Default.aspx",
                type: "POST",
                data: { aciton: 'KM_ShopSaleMoneyDtl_MbRpt', userid: USER_ID, sdate: $("#txtbdate").val(), edate: $("#txtedate").val(),
                    area: $("#arealist").attr('val'), bigarea: $("#bigarealist").attr('val'), shopid: $("#shoplist").attr('val'),
                    matkind: $("#kindlist").attr('val')
                },
                timeout: 30000,
                dataType: "text",
                success: function (data) {
                    var msg = $.trim(data);
                    if (msg == "NO_DATA") {
                        $("#loading-mask").hide();
                        showtoast("没有数据显示!", null, null, null);
                        $("#rptdata").html("");
                    } else {
                        var orderObj = JSON.parse(msg);
                        var html = "";
                        for (var i = 0; i < orderObj.length; i++) {
                            html += '<tr>'
                                    + '<td>' + orderObj[i].orderid + '</td>'
                                    + '<td>' + orderObj[i].shopname + '</td>'
                                    + '<td>' + orderObj[i].saleamt + '</td>'
                                    + '<td>' + orderObj[i].saleqty + '</td>'
                                    + '<td>' + orderObj[i].salecount + '</td>'
                                    + '<td>' + orderObj[i].kdj + '</td>'
                                    + '<td>' + orderObj[i].ldv + '</td>'
                                  + '</tr>'
                        }
                        $("#rptdata").html(html);
                        $("#loading-mask").hide();
                    }
                },
                error: function () {
                    $("#loading-mask").hide();
                    showtoast("通讯超时,请检查网络.", null, 100, 100);
                }
            });
        }
        function LoadDataList(name) {
            USER_ID = localStorage.getItem("UserID");
            $("#datalist").html('<li class="btnlist">正在加载中……</>');
            $.ajax({
                url: url_path + "/ajaxdata/Default.aspx",
                type: "POST",
                data: { aciton: "LoadData", actname: name, userid: USER_ID },
                timeout: 30000,
                dataType: "text",
                success: function (data) {
                    var msg = $.trim(data);
                    var html = '';
                    if (msg == "NO_DATA") {
                        html = '<li class="btnlist">没有数据显示</>';
                        //showtoast("没有数据显示!", null, null, null);
                    } else {
                        var orderObj = JSON.parse(msg);
                        for (var i = 0; i < orderObj.length; i++) {
                            html += '<li><a href="#" class="btnlist" sel="0" val="' + orderObj[i].id + '">' + orderObj[i].name + '</a></li>'
                        }

                    }
                    $("#datalist").html(html);
                },
                error: function () {
                    showtoast("通讯超时,请检查网络.", null, 100, 100);
                }
            });
        }
    </script>
    <style>
        #tb_param
        {
            width: 100%;
            font-size: 14px;
        }
        #tb_param tr
        {
            line-height: 38px;
            padding: 10px 5px;
            border-bottom: 1px solid #DEE1E6;
        }
        #tb_param td
        {
        }
        #tb_param td div
        {
            width: 100%;
        }
        #tb_param td img
        {
            float: right;
            right: 20px;
            padding: 10px;
            height: 15px;
            width: 10px;
        }
        #tb_param td lable
        {
            width: 100%;
        }
        .arr-right
        {
            position: absolute;
            top: 0.21rem;
            right: 0.25rem;
            width: 0.14rem;
            height: 0.24rem;
            background: url(images/arr-right.png) no-repeat;
            background-size: 0.14rem 0.24rem;
        }
        .onsee
        {
            color: Red;
        }
        .onsee i
        {
            background: url(./images/click_ok.png) no-repeat;
            width: 16px;
        }
    </style>
</head>
<body>
    <div id="header" class="head">
        <div class="wrap">
            <i class=" menu_back2"><a href="index.html"></a></i>
            <div class="title">
                <span class="title_d">
                    <p>
                        店铺业绩简报</p>
                </span>
                <div class="clear">
                </div>
            </div>
        </div>
        <div class="logo_msk">
        </div>
    </div>
    <div style="border: 1px solid #DEE1E6; bottom: 0px; position: absolute; top: 50px;
        left: 0px; right: 0px; padding: 2px;">
        <div id="oct" style="background: #fff; height: 100%; width: 100%; overflow: auto;">
            <div style="position: relative; width: 100%; height: 305px;">
                <table id="tb_param">
                    <tr>
                        <td style="width: 100px;">
                            开始日期：
                        </td>
                        <td colspan="2">
                            <input class="laydate-icon" id="txtbdate" value="" onclick="laydate({ elem: '#txtbdate' });">
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            结束日期：
                        </td>
                        <td colspan="2">
                            <input class="laydate-icon" id="txtedate" value="" onclick="laydate({ elem: '#txtedate' });">
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            地区：
                        </td>
                        <td>
                            <a class="show-data" href="#" stn="地区" act="LoadArea" d_id="arealist">
                                <div id="arealist" style="max-height: 50px; overflow: auto;" val="">
                                    全部
                                </div>
                            </a>
                        </td>
                        <td style="width: 20px;">
                            <img src="images/arr-right.png" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            省份：
                        </td>
                        <td>
                            <a class="show-data" href="#" stn="省份" act="LoadBigArea" d_id="bigarealist">
                                <div id="bigarealist" style="max-height: 50px; overflow: auto;" val="">
                                    全部
                                </div>
                            </a>
                        </td>
                        <td style="width: 20px;">
                            <img src="images/arr-right.png" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            店铺：
                        </td>
                        <td>
                            <a class="show-data" href="#" stn="店铺" act="LoadShop" d_id="shoplist">
                                <div id="shoplist" style="max-height: 50px; overflow: auto;" val="">
                                    全部
                                </div>
                            </a>
                        </td>
                        <td style="width: 20px;">
                            <img src="images/arr-right.png" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            货品类别：
                        </td>
                        <td>
                            <a class="show-data" href="#" stn="货品类别" act="LoadMatkind" d_id="kindlist">
                                <div id="kindlist" style="max-height: 50px; overflow: auto;" val="">
                                    全部
                                </div>
                            </a>
                        </td>
                        <td style="width: 20px;">
                            <img src="images/arr-right.png" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="text-align: center">
                            <a class="q-btn" href="#">查询</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="height: 100%; width: 100%;">
                <table id="mytab" class="tb">
                    <thead>
                        <tr>
                            <th style="width: 60px;">
                                序号
                            </th>
                            <th style="width: 200px;">
                                店铺名称
                            </th>
                            <th style="width: 100px;">
                                销售业绩额
                            </th>
                            <th style="width: 100px;">
                                销售数量
                            </th>
                            <th style="width: 80px;">
                                销售单数
                            </th>
                            <th style="width: 60px;">
                                客单价
                            </th>
                            <th style="width: 60px;">
                                连带率
                            </th>
                        </tr>
                    </thead>
                    <tbody id="rptdata">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div id="bg_div" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%;
        z-index: 20000; background-color: black; opacity: .70; display: none;">
    </div>
    <div id="rightsidebar_box" style="position: absolute; top: 0px; bottom: 0px; right: 0px;
        z-index: 20001; background-color: White; height: 100%; width: 0px;">
        <div class="head" style="background-color: Gray;">
            <div class="wrap">
                <i style="position: absolute; left: 3px; top: 15px; padding: 3px;"><a href="#" class="button"
                    id="btncancel">取消</a></i>
                <div class="title">
                    <span class="title_d">
                        <p id="data-title">
                            筛选</p>
                    </span>
                </div>
            </div>
        </div>
        <div style="position: absolute; top: 50px; bottom: 50px; overflow: auto; width: 100%">
            <div style="text-align: center; display: none;">
                正在加载数据...</div>
            <ul id="datalist" class="dlist">
                <!--<li class="btnlist" sel='0'>测试1</li>
                <li class="btnlist" sel='0'>测试2</li>
                <li class="btnlist" sel='0'>测试3</li>
                <li class="btnlist" sel='0'>测试4</li>-->
            </ul>
        </div>
        <div style="position: absolute; bottom: 15px; width: 100%; padding: 15px 15px; background-color: Gray;
            height: 16px;">
            <a id="btnok" class="button s_medium medium-blue" href="#">确定选项</a> <a class="cl-btn button s_medium medium-red"
                href="#">清除选项</a>
        </div>
    </div>
    <div id='loading-mask'>
        <div id="loading">
            <div class="loading-indicator">
                <img src="images/0504317.gif" width="48" height="48" />
                <br />
                <span id="loading-msg">数据加载中...</span>
            </div>
        </div>
    </div>
</body>
</html>
